<template>
  <div>
    <van-search v-model.trim="kw" placeholder="请输入搜索关键词" />
    <v-list :list=list></v-list>
  </div>
</template>

<script>
import {reqSearch} from '../../http/http'
export default {
  data() {
    return {
      list: [],
      kw: "",
    };
  },
  methods: {
    async searchGood() {
      let {data:res} = await reqSearch({keywords:this.kw});
        if(res.code == 200){
            this.list = res.list || [];
            console.log(this.list);
        }else{
            alert(res.msg)
        }
    },
  },
  watch:{
    kw(){
      if(this.kw == ''){
        this.list=[];
        return;
      }
      this.searchGood();
    }
  }
};
</script>

<style scoped>
.searchBox {
  display: flex;
  padding: 0.2rem;
  justify-content: space-evenly;
  align-items: center;
}
.searchBox input {
  width: 70vw;
  height: 0.5rem;
}
.goodlist .tips {
  text-align: center;
  color: red;
  font-weight: 800;
  font-size: 0.5rem;
}
.item {
  padding: 0.2rem;
  background: orange;
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
}
.item img {
  width: 70vw;
  height: 3rem;
}
</style>